<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>如风壁纸 - 上传壁纸</title>
    <link rel="stylesheet" href="css/style.css">
    
    <!-- 预加载关键资源 -->
    <link rel="preload" href="js/api.js" as="script">
    <link rel="preload" href="js/upload.js" as="script">
    

    <style>
        /* 内联关键CSS以提高首屏渲染速度 */
        .upload-container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .upload-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .form-group label {
            font-weight: 500;
            color: #333;
        }

        .form-group input[type="text"],
        .form-group textarea,
        .form-group select {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }

        .form-group textarea {
            min-height: 100px;
            resize: vertical;
        }

        .upload-area {
            border: 2px dashed #ddd;
            border-radius: 10px;
            padding: 40px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        /* 预加载动画，提高用户体验 */
        .loading-placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100px;
            background: #f8f9fa;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        
        .loading-placeholder::after {
            content: "";
            width: 20px;
            height: 20px;
            border: 2px solid #ddd;
            border-top-color: #4a90e2;
            border-radius: 50%;
            animation: spin 1s infinite linear;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* 隐藏加载中的内容 */
        .content-loading {
            visibility: hidden;
        }
        
        /* 使页面内容逐步显示，提升用户体验 */
        .fade-in {
            animation: fadeIn 0.3s ease forwards;
            opacity: 0;
        }
        
        @keyframes fadeIn {
            to { opacity: 1; }
        }

        .preview-container {
            display: none;
            margin-top: 20px;
        }

        .preview-container img {
            max-width: 100%;
            max-height: 400px;
            border-radius: 5px;
        }

        .preview-container.show {
            display: block;
        }

        .tags-input {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 5px;
            min-height: 44px;
        }

        .tag {
            background: #e9ecef;
            padding: 4px 8px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .tag span {
            font-size: 14px;
        }

        .tag i {
            cursor: pointer;
            color: #666;
        }

        .tag i:hover {
            color: #dc3545;
        }

        .submit-btn {
            background: #4a90e2;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .submit-btn:hover {
            background: #357abd;
        }

        .submit-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            pointer-events: none;
        }

        .progress-bar {
            display: none;
            width: 100%;
            height: 4px;
            background: #e9ecef;
            border-radius: 2px;
            margin-top: 10px;
        }

        .progress-bar .progress {
            height: 100%;
            background: #4a90e2;
            border-radius: 2px;
            width: 0;
            transition: width 0.3s ease;
        }

        .progress-bar.show {
            display: block;
        }

        .error-message {
            color: #dc3545;
            font-size: 14px;
            margin-top: 4px;
        }
    </style>
    
    <!-- 延迟加载其余CSS -->
    <link rel="stylesheet" href="css/upload.css" media="print" onload="this.media='all'">
</head>
<body>
    <header class="app-header">
        <h1 class="logo">如风壁纸</h1>
        <div class="search-bar">
            <input type="text" id="search-input" placeholder="搜索壁纸...">
            <button id="search-btn"><img src="icon/search.svg" alt="图标" width="32" height="32"></button>
        </div>
    </header>

    <nav class="bottom-nav">
        <a href="index.html" class="nav-item active">
            <img src="icon/home.svg" alt="图标" width="48" height="48">
            <span>首页</span>
        </a>
        <a href="categories.html" class="nav-item">
            <img src="icon/find.svg" alt="图标" width="48" height="48">
            <span>发现</span>
        </a>
        <a href="favorites.html" class="nav-item">
            <img src="icon/favorite.svg" alt="图标" width="48" height="48">
            <span>收藏</span>
        </a>
        <a href="upload.html" class="nav-item">
            <img src="icon/upload.svg" alt="图标" width="48" height="48">
            <span>上传</span>
        </a>
    </nav>

    <main class="container">
        <!-- 加载占位符 -->
        <div id="loading-placeholder" class="loading-placeholder"></div>
        
        <div id="upload-container" class="upload-container content-loading">
            <h2>上传壁纸</h2>
            <form id="upload-form" class="upload-form">
                <div class="form-group">
                    <label for="title">标题</label>
                    <input type="text" id="title" name="title" required>
                </div>

                <div class="form-group">
                    <label for="description">描述</label>
                    <textarea id="description" name="description" required></textarea>
                </div>

                <div class="form-group">
                    <label for="category">分类</label>
                    <select id="category" name="category" required>
                        <option value="">加载中...</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="tags">标签</label>
                    <div class="tags-input" id="tags-container">
                        <input type="text" id="tag-input" placeholder="输入标签后按回车">
                    </div>
                    <div class="error-message" id="tags-error"></div>
                </div>

                <div class="form-group">
                    <label>壁纸预览</label>
                    <div class="upload-area" id="upload-area">
                        <i class="ri-upload-cloud-line"></i>
                        <p>点击或拖拽文件到此处上传</p>
                        <input type="file" id="file-input" accept="image/*" style="display: none">
                    </div>
                    <div class="preview-container" id="preview-container">
                        <img id="preview-image" src="" alt="预览图">
                    </div>
                    <div class="progress-bar" id="progress-bar">
                        <div class="progress" id="progress"></div>
                    </div>
                    <div class="error-message" id="file-error"></div>
                </div>

                <button type="submit" class="submit-btn" id="submit-btn" disabled>上传壁纸</button>
            </form>
        </div>
    </main>

    <!-- 使用defer属性延迟加载JS，但确保DOM加载完成前执行 -->
    <script src="js/api.js" defer></script>
    <script src="js/storage.js" defer></script>
    <script src="js/upload.js" defer></script>
    
    <!-- 页面加载完成后移除加载占位符 -->
    <script>
        window.addEventListener('DOMContentLoaded', () => {
            // 移除加载占位符，显示内容
            setTimeout(() => {
                document.getElementById('loading-placeholder').style.display = 'none';
                document.getElementById('upload-container').classList.remove('content-loading');
                document.getElementById('upload-container').classList.add('fade-in');
            }, 300);
        });
    </script>
</body>
</html> 